<template>
  <el-row style="height:100%;width: 100%;">
    <el-tabs v-model="activeName" lazy="false" @tab-click="clickTab"
             style="height:100%;display:flex;flex-direction:column;width: 100%;">
      <el-tab-pane label="测试步骤" name="infMain" class="flex-cloumn" style="height:100%;width: 100%;">
        <el-row style="height: 100%;">
          <div style="height: 100%;flex: 1;" class="flex-cloumn">
            <div class="center-top">
              <el-checkbox @change="allItemChange" style="zoom: 120%;" v-model="infAllCheck"></el-checkbox>
              <span v-if="checkList.length === 0" class="item"> {{ infList?.length }} 个步骤</span>
              <span v-if="checkList.length !== 0" class="item">已选 {{ checkList.length }} 项</span>
              <el-link v-if="checkList.length !== 0" style="font-size: 15px;margin-left: 10px;margin-bottom: 3px;font-weight: 550" :underline="false" @click="removeInf">
                移除
              </el-link>
            </div>
            <el-row style="flex:1;overflow:auto;flex-wrap:unset;" class="flex-cloumn">
              <div v-for="(inf, index) in infList" :key="inf.infId" class="center"
                   style="display: flex; align-items: center;">
                <el-checkbox v-model="inf.check" @change="itemChange(inf.check, index)"
                             style="font-size: 50px; zoom: 120%;"></el-checkbox>
                <span style="color: #409eff; font-weight: bold; margin-left: 20px;">{{ inf.infMethod }}</span>
                <span style="flex:1; margin-left: 5%" class="hover-effect" @click="jumpToInf(inf.infId)">{{
                    inf.infName
                  }}</span>
                <div style=" display: flex; justify-content: flex-end" class="mr10">
                                    <span>
                                        <el-link :icon="CopyDocument" :underline="false"
                                                 style="font-size: 20px; vertical-align: middle;"
                                                 v-hasPermi="['testmanage:autoTest:copyInf']"
                                                 @click="copyInf(inf, index)" class="mr5">
                                    
                                        </el-link>
                                    </span>
                  <span>
                                        <el-link :icon="Delete" :underline="false"
                                                 style="font-size: 20px; vertical-align: middle;"
                                                 v-hasPermi="['testmanage:autoTest:removeInf']"
                                                 @click="deleteInf(index)">
    
                                        </el-link>
                                    </span>
                </div>
              </div>
            </el-row>
            <el-row style="margin-top: 10px" justify="center">
              <el-dropdown style="font-size: 30px;" class="right-menu-item hover-effect" trigger="click">
                <div class="avatar-wrapper">
                  <el-button v-hasPermi="['testmanage:autoTest:addInf']" size="m" type="primary">添加步骤</el-button>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleAddInf()">从接口管理中导入</el-dropdown-item>
                    <!-- <el-dropdown-item @click="handleAddCustom()">自定义接口</el-dropdown-item> -->
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-row>
          </div>
          <el-card class="rounded-card" style="width: 350px;"
                   :body-style="{ overflow: 'auto', padding: '0', height: '100%' }">
            <el-row class="rounded-card-title">
                            <span>
                                <el-icon style="font-size: 20px; vertical-align: middle;">
                                    <Promotion/>
                                </el-icon>
                                基础信息
                            </span>
            </el-row>
            <el-form ref="menuDetailRef" class="rounded-card-form" :model="menuDetailform" :rules="rules"
                     label-width="80px">
              <el-row :gutter="12">
                <el-col :span="24">
                  <el-form-item label="名称" prop="menuNameInput">
                    <el-input type="text" v-model="menuDetailform.menuNameInput"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="上级目录" prop="parentId">
                    <el-tree-select
                        style="width:100%"
                        v-model="menuDetailform.parentId"
                        :data="menuOptions"
                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                        value-key="menuId"
                        placeholder="请选择上级目录"
                        check-strictly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="menuDetailform.remark" maxlength="300" type="textarea"
                          placeholder="添加说明"></el-input>
              </el-form-item>
            </el-form>
            <el-row class="rounded-card-title">
                            <span>
                                <el-icon style="font-size: 20px; vertical-align: middle;">
                                    <Promotion/>
                                </el-icon>
                                运行配置
                            </span>
            </el-row>
            <el-form ref="roundedCardFormRef" :model="menuDetailform" :rules="rules"
                     label-width="120px">
              <el-row>
                <el-col :span="21">
                  <el-form-item label="运行环境" prop="runEnv">
                    <baseCombox url="/tsstEnv/list"
                                valueField="envId" labelField="envName"
                                :queryParam="{ envStatus: '1' }"
                                placeholder="请选择接口环境" v-model="menuDetailform.runEnv"/>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-button
                      type="primary"
                      style="margin: 3px 3px 3px 3px"
                      icon="Edit"
                      @click="handleAddEnv"
                      v-hasPermi="['testmanage:env:insert']"
                  ></el-button>
                </el-col>
              </el-row>
              <el-form-item label="" prop="cycleNumber">
                <template #label>
                  <div>
                    <span>循环次数</span>
                    <el-tooltip
                        effect="dark"
                        content="每个线程循环运行所有步骤的次数"
                        placement="top"
                    >
                      <el-icon>
                        <QuestionFilled/>
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <Numberinput :disabled="versionFlag" :min="1" v-model="menuDetailform.cycleNumber" precision="0"/>
              </el-form-item>
              <el-form-item label="" prop="threadNumber">
                <template #label>
                  <div>
                    <span style=" ">线程数</span>
                    <el-tooltip
                        effect="dark"
                        content="同时并发运行的线程数,每个线程都会按顺序运行选中的所有步骤"
                        placement="top"
                    >
                      <el-icon>
                        <QuestionFilled/>
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <Numberinput :disabed="versionFlag" :min="1" :max="100" v-model="menuDetailform.threadNumber"
                             precision="0"/>
              </el-form-item>
              <el-form-item label="" v-if="versionFlag" prop="reportVersion">
                <template #label>
                  <div>
                    <span style="">版本号</span>
                    <el-tooltip
                        effect="dark"
                        content="记录测试报告的版本号"
                        placement="top"
                    >
                      <el-icon>
                        <QuestionFilled/>
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <el-input placeholder="请选择版本号" v-model="menuDetailform.reportVersion"></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="" prop="recordVersion">
                    <template #label>
                      <div>
                        <span style=" ">记录版本</span>
                        <el-tooltip
                            effect="dark"
                            content="记录为版本结果,默认线程数、循环数为1"
                            placement="top"
                        >
                          <el-icon>
                            <QuestionFilled/>
                          </el-icon>
                        </el-tooltip>
                      </div>
                    </template>
                    <el-switch
                        v-model="menuDetailform.recordVersion"
                        size="small"
                        class="ml-2"
                        inline-prompt
                        active-text="是"
                        inactive-text="否"
                        style="--el-switch-on-color: #0e75f8; --el-switch-off-color: #c9c9c9"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <el-row justify="center" class="btns-container">
              <el-button size="m" v-hasPermi="['testmanage:autoTest:run']" type="primary"
                         style="display: flex; align-items: center;" @click="handleRun">
                <el-icon style="font-size: 20px; margin-right: 5px;">
                  <CaretRight/>
                </el-icon>
                运行
              </el-button>
              <el-button size="m" type="primary" v-hasPermi="['testmanage:autoTest:update']"
                         style="display: flex; align-items: center;" @click="handleUpdateDetail"
                         :loading="updateLoading">
                <el-icon style="font-size: 20px; margin-right: 5px;">
                  <UploadFilled/>
                </el-icon>
                保存
              </el-button>
            </el-row>
          </el-card>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="测试报告" name="reportMain" class="flex-cloumn">
        <el-row>
          <div class="center-top">
            <span v-if="reportCheckList.length === 0" class="item">我的报告</span>
            <span v-if="reportCheckList.length !== 0" class="item">已选 {{ reportCheckList.length }} 项</span>
            <el-link v-if="reportCheckList.length !== 0" style="font-size: 15px;padding-left: 10px; margin-left: 20px;margin-bottom: 3px;font-weight: 550" :underline="false"
                     @click="removeReport">移除
            </el-link>
          </div>
        </el-row>
        <xTable ref="reportTableRef" refId="reportTableRef" :data="reportList" border
                @selection-change="handleReportSelectionChange" v-loading="reportLoading">
          <template #columList>
            <el-table-column label="测试场景" fixed align="left" prop="reportName" :show-overflow-tooltip="true"
                             width="150"/>
            <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag :options="reportStatus" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" prop="reportType" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag :options="reportType" :value="scope.row.reportType"/>
              </template>
            </el-table-column>
            <el-table-column label="结果" align="left" width="150">
              <template #default="scope">
                <el-progress v-if="scope.row.status == '0'" class="custom-progress" :show-text="false" color="#46D6A0"
                             :percentage="scope.row.percentage"></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="循环次数" align="right" prop="concurrency"/>
            <el-table-column label="线程数" align="right" prop="round"/>
            <el-table-column label="测试时间" align="center" width="150" prop="requestTime"/>
            <el-table-column label="测试人" align="center" prop="createBy" width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" fixed="right" align="right"  width="55"
                             class-name="small-padding fixed-width">
              <template #default="scope">
                <el-link type="primary"  :icon="Download" :underline="false" v-hasPermi="['testmanage:report:exportReport']"
                         v-if="scope.row.status === '0'" style="font-size: 16px; vertical-align: middle;"
                         @click="handleExport(scope.row.reportId)" class="ml5">

                </el-link>
                <el-link type="primary" :icon="Delete" :underline="false" v-hasPermi="['testmanage:report:remove']"
                         style="font-size: 16px; vertical-align: middle;" @click="deleteReport(scope.row.reportId)">

                </el-link>
              </template>
            </el-table-column>
          </template>
        </xTable>
        <el-pagination
            small
            background
            layout="->,prev, pager, next"
            :total="queryReportParams.total"
            class="mt-4"
            :current-page="queryReportParams.pageNum"
            :page-size="queryReportParams.pageSize"
            @current-change="handlePageChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-drawer v-model="showDetailDrawer" :before-close="handleClose" size="61.8%" direction="rtl"
               custom-class="detail-drawer">
      <detail ref="sstDetailRef" v-if="showDetailDrawer" :detailLoad="detailLoad" @handleExport="handleExport"
              :count="count"/>
    </el-drawer>
  </el-row>
  <el-dialog :close-on-click-modal="false" draggable="true" :title="addInfTitle" v-model="addInfOpen" width="600px"
             append-to-body>
    <el-form ref="infListRef" :model="infListForm" label-width="100px">
      <el-row :gutter="12">
        <el-col :span="20">
          <el-form-item label="接口名称" prop="infName">
            <el-input
                v-model="infListForm.infName"
                placeholder="请输入接口名称"
                clearable
                :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="">
        <el-tree
            :data="infOptions"
            show-checkbox
            style="width:100%"
            node-key="infId"
            :default-expanded-keys="expandTree"
            empty-text="加载中，请稍候"
            ref="infRef"
            @check="checkInf"
            :filter-node-method="filterNode"
            :props="{ value: 'infId', label: 'infName', children: 'children' }"
        />
      </el-form-item>
    </el-form>
    <span style=" margin-left: 50px; width: 70%;">已选{{ infListForm.infs.length }}个接口用例</span>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitInfList">确 定</el-button>
        <el-button @click="cancelInf">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="AutoTestTab">
import {getCurrentInstance, reactive, ref, watch} from "vue";
import Detail from '@/views/testmanage/onekeysst/detail'
import Numberinput from '@/lz/base/number'
import {ElMessageBox} from 'element-plus'
import {
  getMenuDetail,
  updateAtMenu,
  autoTestRun,
  queryAtReport,
  deleteReports
} from "@/api/testmanage/autoTest";

import {
  listInf,
  delInf,
} from "@/api/testmanage/sstinf";

import {div, isNotVoid, isVoid, mul} from "@/utils/util";
import {Delete, CopyDocument, Download} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {listDefaultEnv} from "@/api/testmanage/env";

const router = useRouter();

const {proxy} = getCurrentInstance();
const {
  sys_normal_disable,
  reportStatus,
  reportType
} = proxy.useDict("sys_normal_disable", "reportStatus", "reportType");

const checkList = ref([])
const reportLoading = ref(true);
const reportCheckList = ref([])
const activeName = ref("")
const infAllCheck = ref(false)
const infList = ref([])
const addInfOpen = ref(false)
const addInfTitle = ref("从接口管理中导入")
const infOptions = ref([]);
const expandTree = ref([]);
const reportList = ref([]);
const versionFlag = ref(false)
const showDetailDrawer = ref(false)

const data = reactive({
  queryReportParams: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  infListForm: {
    menuId: '',
    infName: '',
    status: 0,
    infs: []
  },
})

const {queryReportParams, infListForm} = toRefs(data);

const props = defineProps({
  menuDetailform: {
    type: Object,
    default: {}
  },
  menuOptions: {
    type: Array,
    default: []
  }
})
const rules = ref({
  menuNameInput: [{required: true, message: '', trigger: 'change'}],
  parentId: [{required: true, message: '', trigger: 'change'}],
  runEnv: [{required: true, message: '', trigger: 'change'}],
  paramSource: [{required: true, message: '', trigger: 'change'}],
  cycleNumber: [{required: true, message: '', trigger: 'change'}],
  threadNumber: [{required: true, message: '', trigger: 'change'}],
  mcs: [{required: true, message: '', trigger: 'change'}],
  recordVersion: [{required: true, message: '', trigger: 'change'}],
  reportVersion: [{required: true, message: '', trigger: 'change'}],
})
//点击分配用户按钮
onMounted(() => {
  const queryData = {
    menuId: props.menuDetailform.menuId
  }
  activeName.value = 'infMain';
  getMenuDetail(queryData).then(response => {
    infList.value = response.result;
  });
})

watch(() => props.menuDetailform.recordVersion, (nv, ov) => {
  if (nv) {
    versionFlag.value = true
    props.menuDetailform.paramSource = 'entry'
    props.menuDetailform.threadNumber = 1
    props.menuDetailform.cycleNumber = 1
  } else {
    versionFlag.value = false
  }
}, {deep: true, immediate: true})

watch(() => infListForm.value.infName, val => {
  proxy.$refs["infRef"].filter(val);
});

/**
 * 新增环境跳转
 * */
function handleAddEnv(row) {
  let url = '/pricing/Env';
  let realUrl = url.replace("/index", "")
  router.push({
    path: realUrl
  })
}

/**
 * 初始化默认环境
 * */
function getDefaultEnv() {
  let data = {'isDefault': '1'}
  listDefaultEnv(data).then(response => {
    if (response.rows.length === 1) {
      props.menuDetailform.runEnv = String(response.rows[0].envId);
    }
  });
}

getDefaultEnv();

function clickTab(tab, event) {
  switch (tab.index) {
    case "0":
      const queryData = {
        menuId: props.menuDetailform.menuId
      }
      getMenuDetail(queryData).then(response => {
        infList.value = response.result;
      });
      break;
    case "1":
      reportList.value = []
      getReportList();
      break;
  }
}

//查询测试报告
function getReportList() {
  reportLoading.value = true
  queryReportParams.value.menuId = props.menuDetailform.menuId
  queryAtReport(queryReportParams.value).then(response => {
    reportLoading.value = false
    queryReportParams.value.total = response.total
    reportList.value = response.rows
  });
}

/** 通过条件过滤接口节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.infName.indexOf(value) !== -1;
};

/** 勾选所有的接口 */
function allItemChange(check) {
  checkList.value = []
  infList.value.forEach((item, index) => {
    if (check) {
      checkList.value.push(index)
    }
    item.check = check
  })
}


/** 勾选接口 */
function itemChange(check, itemIndex) {
  if (check) {
    checkList.value.push(itemIndex)
  } else {
    checkList.value.forEach((item, index) => {
      if (item == itemIndex) {
        checkList.value.splice(index, 1);
      }
    })
  }
}

//移除接口
function removeInf() {
  infAllCheck.value = false
  checkList.value.forEach((item) => {
    delete infList.value[item];
  })
  checkList.value = []
  infList.value = infList.value.filter(item => !["", null, undefined, NaN,].includes(item));
}

async function handleAddInf() {
  addInfOpen.value = true
  infListForm.value.menuId = props.menuDetailform.menuId
  await listInf({status: '0'}).then(response => {
    let list = response.data
    infOptions.value = proxy.handleTree(list, "infId");
    list.forEach((item) => {
      expandTree.value.push('1')
      // if (item.infType == 'C') {
      //     if(item.parentId == 1) {
      //         expandTree.value.push(item.infId)
      //     }
      // }
    })
  });
}

//选中接口进行统计
function checkInf() {
  let res = proxy.$refs.infRef.getCheckedNodes()
  infListForm.value.infs = []
  res.forEach((item) => {
    if (item.infType == 'I') {
      infListForm.value.infs.push(item)
    }
  })
}

function submitInfList() {
  addInfOpen.value = false;
  infListForm.value.infs.forEach((item) => {
    infList.value.push(item)
  })
}

//接口导入取消
function cancelInf() {
  addInfOpen.value = false
  resetInfListForm()
}

function resetInfListForm() {
  infListForm.value = {
    menuId: null,
    infName: null,
    status: 0,
    infs: []
  },
      proxy.resetForm("infListRef");
}

function copyInf(inf, index) {
  infList.value.splice(index, 0, inf);
}

function deleteInf(index) {
  infList.value.splice(index, 1);
}

//跳转接口管理
function jumpToInf(id) {
  router.push({
    path: '/pricing/inf',
    query: {infId: id},
  })
}

//运行
function handleRun() {
  if (isVoid(props.menuDetailform.runEnv)) {
    proxy.$modal.msgError("请选择测试环境");
    return
  }
  if (props.menuDetailform.recordVersion) {
    if (isVoid(props.menuDetailform.reportVersion)) {
      proxy.$modal.msgError("请输入版本号");
      return
    }
  }
  if (!(infList.value.length > 0)) {
    proxy.$modal.msgError("请至少添加并选中一个步骤");
    return
  }

  let data = Object.assign({}, props.menuDetailform)
  if(isNotVoid(props.menuDetailform.runEnv)) {
    data.runEnv = props.menuDetailform.runEnv
  }
  data.infList = infList.value
  if (activeName.value === 'reportMain') {
    activeName.value = 'infMain';
  }
  autoTestRun(data).then(response => {
    if (response.code !== 200) {
      proxy.$modal.msgError(response.msg);
    } else {
      showDetailDrawer.value = true
      nextTick(() => {
        proxy.$refs.sstDetailRef.startTimer()
        let reportId = response.result
        let count = data.infList.length * data.cycleNumber * data.threadNumber
        let threadNumber = data.threadNumber
        let infLength = data.infList.length
        let mcs = data.mcs
        proxy.$refs.sstDetailRef.getDetail(reportId, count, threadNumber, infLength, mcs)
      })
      proxy.$modal.msgSuccess("线程资源准备成功");
    }
  });
}

//详情关闭
function handleClose() {
  if (proxy.$refs.sstDetailRef.stopFlag) {
    if (proxy.$refs.sstDetailRef.stopRun) {
      showDetailDrawer.value = false
      proxy.$refs.sstDetailRef.resetData()
    } else {
      ElMessageBox.confirm('确定要关闭页面吗？关闭后将在后台运行', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        showDetailDrawer.value = false
        proxy.$refs.sstDetailRef.resetData()
      }).catch(() => {
      });
    }
  } else {
    showDetailDrawer.value = false
    proxy.$refs.sstDetailRef.resetData()
  }

}

function handleExport(id) {
  proxy.download("/inf/exportAtReport", Object.assign({}, {reportId: id}));
}

//保存测试场景的详情
const updateLoading = ref(false);

function handleUpdateDetail() {
  Promise.all([proxy.$refs.menuDetailRef.validate(), proxy.$refs.roundedCardFormRef.validate()]).then(res => {
    console.log(res)
    let data = Object.assign({}, props.menuDetailform, {menuName: props.menuDetailform.menuNameInput})
    data.infList = infList.value
    updateLoading.value = true;
    updateAtMenu(data).then(response => {
      proxy.$modal.msgSuccess("保存成功");
      proxy.$emit('getList');
      props.menuDetailform.menuName = data.menuName
    }).finally(() => {
      updateLoading.value = false;
    });
  })
}

//移除单个报告
function deleteReport(id) {
  let ids = []
  ids.push(id)
  deleteReports(ids).then(response => {
    proxy.$modal.msgSuccess("删除成功!");
    getReportList()
  });
}

function handlePageChange(currentPage) {
  queryReportParams.value.pageNum = currentPage
  getReportList()
}

//选中报告
function handleReportSelectionChange(selection) {
  if (selection.length == 0) {
    reportCheckList.value = []
  } else {
    reportCheckList.value = selection.map(item => item.reportId);
  }
}

//批量移除报告
function removeReport() {
  deleteReports(reportCheckList.value).then(response => {
    proxy.$modal.msgSuccess("删除成功!");
    getReportList()
  });
}

</script>

<style scoped>

.el-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.custom-input {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-input input {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

#selectForm >>> .el-form-item__label {
  font-size: 16px;
}

.rounded-card {
  border-radius: 8px;
  /* background-color: #f8fafb; */
  height: 100%;
  margin-left: 8px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, .08), 0 0 2px rgba(16, 24, 40, .02), 0 3px 6px rgba(16, 24, 40, .06);
}

.custom-input input:focus {
  border-bottom-color: #409EFF;
}

.center-top {
  /* margin: auto; */
  margin-top: 5px;
  /* width: 90%; */
  padding: 5px 10px;
}

.center {
  /* margin: auto; */
  margin-top: 5px;
  width: 100%;
  background-color: #f8f8f8;
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-primary);
}

.item {
  margin-left: 20px;
  font-size: 18px;
  font-weight: bold;
}

.hover-effect {
  /* color: black;  */
  /* 初始字体颜色 */
}

.hover-effect:hover {
  color: #409eff; /* 鼠标放上去后的字体颜色 */
}

/* 修改进度条的底色 */
/deep/ .custom-progress .el-progress-bar__outer {
  background-color: #E95477;
}
</style>
<style lang="scss" scoped>
:deep(.el-tabs__content) {
  flex: 1
}

.rounded-card {
  padding-bottom: 60px;
  position: relative;

  .btns-container {
    position: absolute;
    bottom: 15px;
  }

  :deep(.el-card__body) {
    padding: 0 !important;
  }

  .rounded-card-form {
    padding: 12px;
  }

  :deep(.el-form-item) {
    // display: flex;
    // flex-direction: column;
    .el-form-item__label {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .el-icon {
        margin-left: 5px;
        margin-bottom: 3px;
        font-size: 14px;
        color: rgba(16, 24, 40, 0.56);
      }
    }
  }

  .rounded-card-title {
    padding: 11px;
    border-bottom: 1px solid #f2f4f7;
    background-color: #f9fafb;
  }

  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>
<style scoped lang="scss">
:deep(.detail-drawer) {
  .el-drawer__header {
    height: 0;
    position: relative;
    margin-bottom: 0;
  }

  .el-drawer__body {
    padding-top: 0;
  }
}
</style>
